<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="visible"
			:before-close="closeFormDialog"
			:close-on-click-modal="false"
			width="630px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<p class="imgTip" style="margin-bottom: 1rem">
					{{ $t('funds.fund_audit.cancel_withdraw_tip') }}
				</p>
				<el-form-item
					:label="$t('funds.fund_audit.backend_remark')"
					prop="auditDesc"
				>
					<el-input
						v-model="form.auditDesc"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					v-if="auditResult === 2"
					:label="$t('funds.fund_audit.client_audit_desc')"
					prop="clientAuditDesc"
				>
					<el-input
						v-model="form.clientAuditDesc"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item v-if="auditResult === 2" label="凭证上传:">
					<el-col :span="12">
						<UploadItem
							ref="imgUpload"
							:uploadAPI="uploadAPI"
							:upload-file-type="'image'"
							:platform="'PC'"
							:fileSize="fileSize"
							:img-urls="form.imageUrls"
							@upoladItemSucess="handleUploadSucess"
							@startUpoladItem="handleStartUpload"
							@deleteUpoladItem="handleDeleteUpload"
							@upoladItemDefeat="handleUploadDefeat"
						></UploadItem>
					</el-col>
					<el-col :span="24">
						<p class="imgTip">
							{{ $t('agent.rule_upload_tip') }}
						</p>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFormDialog">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submitLoan()">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowGoogleKey"
			@getGoogleKey="submitGoogleKey($event)"
			@backPrevStep="closeGoogleKey()"
		></GoogleKeyInput>
	</div>
</template>

<script>
export default {
	components: {
		UploadItem: () => import('@/components/UploadItem'),
		GoogleKeyInput: () => import('@/components/GoogleKeyInput')
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		auditResult: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			isShowGoogleKey: false,
			form: {
				auditDesc: '',
				clientAuditDesc: '',
				imageUrls: ''
			},
			showBtb: false,
			imageViewerVisible: false,
			imageViewerSrc: ''
		}
	},
	computed: {
		title() {
			if (this.auditResult === 1) {
				return '确认出款'
			} else {
				return '取消出款'
			}
		},
		fileSize() {
			return 5 * 1024 * 1024
		},
		uploadAPI() {
			return this.$api.imageUpload
		},
		formRules() {
			return {
				auditDesc: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				],
				clientAuditDesc: [
					{
						required: true,
						min: 2,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		'form.imageUrls': {
			handler(newVal) {
				this.showBtb = newVal && newVal.length > 0
			}
		},
		'auditResult': {
			handler(newVal) {
				this.isShowGoogleKey = newVal === 3
			}
		}
	},
	created() {},
	methods: {
		handleStartUpload() {
			this.$message.info(
				this.$t('funds.capital_adjustment.update_img_tip1')
			)
		},
		handleUploadSucess({ index, file, id }) {
			this.imageViewerSrc = file.imgUrl
			this.form.imageUrls = file.imgUrl
		},
		handleUploadDefeat() {
			this.form.imageUrls = ''
			this.$message.error(
				this.$t('funds.capital_adjustment.update_img_tip2')
			)
		},
		handleDeleteUpload() {
			this.form.imageUrls = ''
		},
		closeGoogleKey() {
			this.isShowGoogleKey = false
			if (this.auditResult === 3) {
				this.$emit('closeGoogleKey')
			}
		},
		submitGoogleKey(googleVerifyCode) {
			const params = {
				googleVerifyCode: googleVerifyCode,
				auditResult: this.auditResult,
				auditDesc: this.form.auditDesc,
				clientAuditDesc: this.form.clientAuditDesc,
				imageUrls: this.form.imageUrls
			}
			this.isShowGoogleKey = false
			this.$emit('auditOne', params)
			this.closeFormDialog()
		},
		submitLoan() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.isShowGoogleKey = true
				}
			})
		},
		closeFormDialog() {
			this.form.auditDesc = ''
			this.form.clientAuditDesc = ''
			if (this.auditResult === 2) {
				this.form.imageUrls = ''
				this.$refs.imgUpload.clearFile()
			}
			this.$refs.form.resetFields()
			this.$emit('update:visible', false)
		}
	}
}
</script>
